<template>
 <el-card class="box-card">
  <div class="text item">
    <el-form ref="form" :model="data" label-width="80px">
      <el-form-item label="关键字" class="ipt">
        <el-input v-model="data.keyword"  placeholder="根据编号搜索"></el-input>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="onSubmit" size="mini">搜索</el-button>
        <el-button size="mini" @click="data.keyword = ''">清除</el-button>
      </el-form-item>
    </el-form>
    <el-alert
      title=""
      type="info"
      :closable="false"
      show-icon>
      一共有数据{{datas.counts}}条
    </el-alert>
    <!--                行              -->
    <el-table
    :data="items"
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="编号"
      width="190">
    </el-table-column>
        <el-table-column
      label="题型">
      <template slot-scope="scope">
        {{scope.row.questionType | type}}
      </template>
    </el-table-column>
    <el-table-column
    label="题目编号"
    width="190"
    class="titlenumber">
    <template slot-scope="scope">
     <el-button type="text">
        <div v-for="(questionIDs, index) in scope.row.questionIDs" :key="index">
         <div @click="preview(questionIDs.id)">{{questionIDs.number}}</div>
        </div>
     </el-button>
    </template>
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="录入时间">
    </el-table-column>
    <el-table-column
      prop="totalSeconds"
      label="答题时间(s)">
    </el-table-column>
    <el-table-column
      prop="accuracyRate"
      label="正确率(%)">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="录入人">
    </el-table-column>
    <el-table-column
      label="操作">
    <template slot-scope="scope">
      <el-button type="danger" class="el-icon-delete" plain circle size="mini" @click="dele(scope.row.id)"></el-button>
    </template>
    </el-table-column>
   </el-table>
   </div>
   <!--        分页          -->
   <el-pagination
    background
    @current-change="page"
    layout="prev, pager, next"
    :total="datas.counts">
   </el-pagination>
   <!-- 弹框 -->
   <el-dialog
    title="题目预览"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
    @close="question.popdata.videoURL=''"
    >
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="6"><div class="grid-content bg-purple">【题型】: {{popdata.questionType | type}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">【编号】: {{popdata.enterpriseID}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【难度】: {{popdata.chkState}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">【标签】: {{popdata.tags}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><div class="grid-content bg-purple">【学科】: {{popdata.subjectName}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">【目录】:{{popdata.directoryName}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">【方向】:{{popdata.direction}}</div></el-col>
      </el-row>
    </el-form>
    <hr>
    <el-row>
    <el-col :span="6"><div class="grid-content bg-purple">【题干】:</div></el-col>
    </el-row>
   <p v-html="popdata.answer" style="color:blue;"></p>
    <div>多选题 选项：（以下选中的选项为正确答案）</div>
    <template>
      <el-checkbox-group
        v-model="checkedCities1"
         v-for="(city, index) in popdata.options" :key="index">
        <el-checkbox :label="city" :key="index" :checked="city.isRight === 1">{{city.code}}{{city.title}}</el-checkbox>
      </el-checkbox-group>
    </template>
    <hr>
    参考答案<el-button type="danger" @click="video = true">参考视频</el-button>
    <div style="withe:300px; height:200px;" v-if="video">
      <video  :src="popdata.videoURL" style="withe:300px; height:200px;" controls="controls"></video>
    </div>
    <hr>
    <p>【答案解析】：java是一门后台编程语法，而javascrip起初是浏览器脚本，后台nodejs出现了称为了后台编程语言。</p>
    <hr>
    <p>【题目备注】：{{popdata.remarks}}</p>
    <div class="footer" >
      <el-button type="primary"  @click="dialogVisible = false">关闭</el-button>
    </div>
   </el-dialog>
 </el-card>
</template>

<script>
import { randoms, detail, removeRandoms } from '@/api/hmmm/questions'
const cityOptions = ['是同一门编程语言', 'java写后台', '都有变量', 'JavaScript只能写前端', '没区别']
export default {
  name: 'questions',
  created () {
    this.get()
  },
  filters: {
    type (num) {
      const types = {
        3: '简答',
        1: '单选',
        2: '多选'
      }
      return types[num]
    }
  },

  methods: {
    // 题目预览获取
    async preview (id) {
      this.dialogVisible = true
      console.log(id)
      const date = await detail({ id: id })
      this.popdata = date.data
      console.log(date)
    },
    // 弹窗函数
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.video = false
        })
        .catch(_ => {})
    },
    open () {
      console.log(11)
    },
    // 页数
    page (number) {
      this.data.page = number
      this.get()
    },
    async get () {
      const { page, keyword, pagesize } = this.data
      const res = await randoms({ page, keyword, pagesize })
      console.log(res.data)
      this.datas = res.data
      this.items = res.data.items
      console.log(222)
    },
    // 删除
    dele (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await removeRandoms({ id })
        if (res.status === 200) {
          this.get()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    onSubmit () {
      this.get()
    }
  },
  data () {
    return {
      a: '<p><a href="https://cn.vuejs.org/" rel="noopener noreferrer" target="_blank">https://cn.vuejs.org/</a> 有答案</p>',
      // 渲染弹窗的数据
      popdata: {},
      // 视频显示开关
      video: false,
      checkedCities1: ['java写后台', '都有变量'],
      cities: cityOptions,
      // 弹窗开关
      dialogVisible: false,
      // 关键字
      datas: {},
      data: {
        keyword: '',
        page: 1,
        pagesize: 10
      },
      items: [],
      form: {}
    }
  }
}

</script>

<style scoped >
.ipt {
  display: inline-block;
}
.el-input--medium /deep/ .el-input__inner {
  width: 200px;
  height: 25px;
}
.btn {
  float: right;
}
.btn-prev {
  float: right;
}
.btn .el-form-item__content {
  width: 200px;
}
.el-button--danger {
  text-align: center;
}
.el-form-item--medium {
  width: 215px;
  height: 36px;
  display: inline-block;
}
.el-card__body .el-dialog__wrapper /deep/ .el-dialog{
  width: 80%;
}
.el-checkbox-group label {
  display: block;
}
.btn .el-button--primary  {
float: right;
}
.btn .el-button--default {
  float: left;
}
.footer {
  height: 20px;
  padding: 10px;
}
.footer button {
  float: right;
}
.el-alert__icon.is-big {
  font-size: 16px;
}
</style>
